<template>
  <BasicModal @register="registerjournalModal" title="告警日志" :width="1200">
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-space :size="12">
          <a-date-picker style="width: 200px;" show-time v-model:value="alarmTime" @change="alarmTimeChange" />
          <a-select style="width: 200px;" v-model:value="alarmLevel" @change="levelChange"
            :options="alarmLevelOpt"></a-select>
          <a-select style="width: 200px;" v-model:value="equip" @change="equipChange" :options="equipOpt"></a-select>
          <a-input style="width: 200px;" v-model:value="pageInfo.keyword" @change="keywordChange" placeholder="搜索告警信息">
            <template #suffix>
              <search-outlined />
            </template>
          </a-input>
        </a-space>
      </template>
      <template #status="{ record, text }">
        <a-badge :color="['#23d96e', '#ff9800', '#e70001'][text]" :text="['通知', '提醒', '告警'][text]" />
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, reactive, toRaw, onMounted } from 'vue';
import { BasicTable } from '/@/components/Table';
import { BasicModal, useModalInner } from '/src/components/Modal';
import { useListPage } from '/@/hooks/system/useListPage';
import { journalColumns } from './data'
import type { ActionItem } from '/@/components/Table';
import type { SelectProps } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { alermLogApi } from './data.api'
import dayjs, { Dayjs } from 'dayjs';

let alarmLevel = ref(99)
let equip = ref(0)
let alarmTime = ref<[Dayjs, Dayjs]>()

let pageInfo = reactive({
  logLevel: [0, 1, 2],
  keyword: '',
  beginTime: null,
  endTime: null,
  deviceType: [1, 2],
})

let isUpdate = ref()

const alarmLevelOpt = ref<SelectProps['options']>([
  {
    value: 99,
    label: '全部告警等级',
  },
  {
    value: 0,
    label: '通知',
  },
  {
    value: 1,
    label: '提醒',
  },
  {
    value: 2,
    label: '警告',
  },
]);

const equipOpt = ref<SelectProps['options']>([
  {
    value: 0,
    label: '全部设备',
  },
  {
    value: 1,
    label: '飞行器',
  },
  {
    value: 2,
    label: '机场',
  },
])

const [registerjournalModal, { closeModal }] = useModalInner(async (data) => {
  isUpdate.value = data.isUpdate;
  console.log(isUpdate.value,'isUpdate.value')
  searchQuery()
})

const { tableContext } = useListPage({
  designScope: 'playbackModal',
  tableProps: {
    api: alermLogApi.query,
    showActionColumn: false, //是否显示操作列
    columns: journalColumns,
    useSearchForm: false,
    tableSetting: {
      redo: false,
      size: false,
      setting: false
    },
    fetchSetting: {
      pageField: 'pageIndex',
      sizeField: 'pageSize',
      listField: 'content',
    }
  },
})

const [registerTable, { reload, setProps }, { rowSelection, selectedRowKeys }] = tableContext;

function searchQuery() {
  setProps({ searchInfo: toRaw(pageInfo) });
  reload()
}

function levelChange(event) {
  if (event != 99) {
    pageInfo.logLevel = [event]
  } else {
    pageInfo.logLevel = [0, 1, 2]
  }

  searchQuery()
}

function equipChange(event) {
  if (event != 0) {
    pageInfo.deviceType = [event]
  } else {
    pageInfo.deviceType = [1, 2]
  }

  searchQuery()
}

function alarmTimeChange() {
  console.log(alarmTime.value)
  if (alarmTime.value) {
    pageInfo.beginTime = dayjs(alarmTime.value.$d).format('YYYY-MM-DD HH:mm:ss')
  }
  // if (alarmTime.value && alarmTime.value.length > 0) {
  //   pageInfo.beginTime = dayjs(alarmTime.value[0].$d).format('YYYY-MM-DD HH:mm:ss')
  //   pageInfo.endTime = dayjs(alarmTime.value[1].$d).format('YYYY-MM-DD HH:mm:ss')
  // } else {
  //   pageInfo.beginTime = null
  //   pageInfo.endTime = null
  // }
  searchQuery()
}

let timer: ReturnType<typeof setTimeout>;
function keywordChange() {
  if (timer) {
    clearTimeout(timer)
  }

  timer = setTimeout(() => {
    searchQuery()
  }, 800)
}



</script>
